<template>
	<div class="extends-toolbar-container">
		<div class="toolbar-left">
			<div class="logo"></div>
			<div class="menu-list">
				<div class="menu-item">
					<el-popover v-model:visible="visibleButton" placement="bottom" :width="340">
						<BOOK />
						<template #reference>
							<div @mouseenter="visibleButton = true" @mouseleave="visibleButton = false">掘金小册</div>
						</template>
					</el-popover>
				</div>
				<div class="menu-item">
					<el-popover v-model:visible="visibleButtonTwo" placement="bottom" :width="280">
						<APP />
						<template #reference>
							<div @mouseenter="visibleButtonTwo = true" @mouseleave="visibleButtonTwo = false">下载掘金APP</div>
						</template>
					</el-popover>
				</div>
			</div>
		</div>
		<div class="toolbar-right">
			<el-select class="toolbar-select" v-model="type" placeholder="Select">
				<el-option label="前端" :value="1"> </el-option>
				<el-option label="后端" :value="2"> </el-option>
				<el-option label="产品" :value="3"> </el-option>
				<el-option label="Android" :value="4"> </el-option>
			</el-select>
		</div>
	</div>
</template>
<script lang="ts">
import { defineComponent, reactive, toRefs } from 'vue';
import BOOK from '/@/components/ExtendsToolbar/FPABook.vue';
import APP from '/@/components/ExtendsToolbar/FPAApp.vue';
import { Moon } from '@element-plus/icons-vue';
export default defineComponent({
	name: 'extends-toolbar',
	components: {
		BOOK,
		APP,
    Moon
	},
	setup() {
		const state = reactive({
			visibleButton: false,
			visibleButtonTwo: false,
			type: 1,
		});
		return {
			...toRefs(state),
		};
	},
});
</script>
<style lang="scss" scoped>
.extends-toolbar-container {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	height: 100%;
	.toolbar-left {
		display: flex;
		flex-direction: row;
		.logo {
			display: block;
			width: 9.75rem;
			height: 2rem;
			cursor: pointer;
			background-position: center;
			background-repeat: no-repeat;
			background-size: contain;
			background-image: url(https://lf-cdn-tos.bytescm.com/obj/static/xitu_extension/static/brand.82c24770.svg);
		}
		.menu-list {
			width: auto;
			display: flex;
			flex-direction: row;
			align-items: center;
			margin-left: 1rem;
			.menu-item {
				width: 10rem;
				height: 100%;
				color: #86909c;
				font-size: 1.33rem;
				white-space: nowrap;
				transition: all 0.15s linear;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
			}
		}
	}
  .toolbar-right{
    display: flex;
    flex-direction: row;
    align-items: center;
    .icon-group{
      margin-left: 10px;
    }
  }
}
</style>
<style>
.el-select {
	padding: 0;
}
.el-select .el-input__inner {
	cursor: pointer;
	padding-right: 35px;
	display: block;
	background: #1e80ff !important;
	color: #fff;
}
</style>
